<template>
	<div class="common-layout banner">
		<el-container>
			<el-header>
				<label>轮播广告图</label>
				<router-link to="/admin/hotedit">添加新的轮播图</router-link>
			</el-header>
			<el-main>
				<el-table :data="swiperlist" style="width: 100%;">
					<el-table-column prop="memo" label="描述" width="180" />
					<el-table-column prop="hot" label="热度" />
					<el-table-column prop="type" label="类型" />
					<el-table-column label="图片">
						<template #default="score">
							<el-image :src="`${$Imgurl}/showImg/${score.row.picture}`"></el-image>
						</template>
					</el-table-column>
					<el-table-column label="删除">
						<template #default="score">
							<el-button type="text" size="small" @click="del(score.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default{
		name:'Banner',
		data(){
			return{
				swiperlist:[]
			}
		},
		created() {
			this.axios.get('/api/adm/hot/findAll').then((res)=>{
				if (res.status==200) {
					this.swiperlist=res.data.data
				}
			}).catch((error)=>{
				console.log(error)
			})
		},
		methods:{
			del(id){
				this.axios.get(`/api/adm/hot/delete/${id}`).then((res)=>{
					console.log(res)
					this.$router.go(0)
				}).catch((error)=>{
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
	.banner{
		width: 100%;
		height: 100%;
	}
	.banner p{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.banner p label{
		font-weight: bold;
		font-size: 20px;
		line-height: 60px;
	}
	.banner p a{
		padding: 5px;
		background: #FFFFFF;
		color: #000000;
		border: 1px solid black;
		border-radius: 2px;
	}
	.banner .el-image{
		width: 200px;
		height: 100px;
	}
	.el-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
